<template>
  <div class="content">
    <div class="left-section">
        <!-- 设备列表 -->
        <WeatherCompare1 />
        <!-- 生物预警 -->
        <WeatherCompare2 />
        <!-- 气象对比 -->
        <WeatherCompare />
     </div>
    <div class="center-section">
        <CenterUp/>
      <img src="@/assets/img/ledgend2.png" class="ledgend-img">
      <Center />
    </div>
    <!-- 右侧区域 -->
    <div class="right-section">
        <!-- 设备详情 -->
      <GroupCompare1 v-if="type!='kongqi'"/>
      <!-- 湿度趋势 -->
      <GroupCompare2  v-if="type!='kongqi'"/>
      <!-- 雨量堆积图 -->
      <GroupCompare v-if="type!='kongqi'"/>
        <WeatherCompare3 v-if="type==='kongqi'"/>
        <WeatherCompare4 v-if="type==='kongqi'"/>
        <WeatherCompare5 v-if="type==='kongqi'"/>
    </div>
  </div>
</template>
<script>
import WeatherCompare1 from '@/components/BiologicalObservation/WeatherCompare1.vue'
import WeatherCompare2 from '@/components/BiologicalObservation/WeatherCompare2.vue'
import WeatherCompare3 from '@/components/BiologicalObservation/WeatherCompare3.vue'
import WeatherCompare4 from '@/components/BiologicalObservation/WeatherCompare4.vue'
import WeatherCompare5 from '@/components/BiologicalObservation/WeatherCompare5.vue'
import WeatherCompare from '@/components/BiologicalObservation/WeatherCompare.vue'
import GroupCompare1 from '@/components/BiologicalObservation/GroupCompare1.vue'
import GroupCompare2 from '@/components/BiologicalObservation/GroupCompare2.vue'
import GroupCompare from '@/components/BiologicalObservation/GroupCompare.vue'
import Center from '@/components/BiologicalObservation/Center.vue'
import CenterUp from '@/components/BiologicalObservation/CenterUp.vue'
import {EventBus} from "../utils/event-bus";
export default {
    name: 'BiologicalObservation',
    components: {
        WeatherCompare1,
        WeatherCompare2,
        WeatherCompare3,
        WeatherCompare4,
        WeatherCompare5,
        WeatherCompare,
        GroupCompare1,
        GroupCompare2,
        GroupCompare,
    Center,
      CenterUp
    },
    data() {
        return {
            position:{lon:121.4441, lat:31.147664,zoom:16.35},
            type:''
        }
    },
    watch: {
        '$route.query': {
            handler(newQuery, oldQuery) {
                // 当路由的query参数发生变化时，执行这里的代码
                this.type=newQuery.deviceType;
            },
            deep: true, // 设置为true以深度观察对象内部的变化
            immediate: true // 组件创建时立即执行一次
        }
    },
    mounted() {
        EventBus.$emit('set-position', this.position);
        EventBus.$emit('map-show', true);
    }
}
</script>
<style scoped>
.ledgend-img{
  position: absolute;
  bottom: 72px;
  right: 37px;
}
</style>

